<template>
  <div>
    <m-table
      :data="tableData"
      :options="options"
      elementLoadingText="loading"
      isEditRow
      v-model:editRowIndex="editRowIndex"
      showPagination
      @check="check"
      @close="close"
    >
      <template #name="{ scope }">
        {{ scope.row.name }}
      </template>

      <template #action="{ scope }">
        <el-button type="primary" @click="edit(scope)">编辑</el-button>
        <el-button @click="cancel(scope)">删除</el-button>
      </template>
      <template #editRow="{ scope }">
        <el-button type="primary">确认</el-button>
        <el-button>取消</el-button>
      </template>
      <!-- <template #editCell="{ scope }">
        <el-button type="primary">确认</el-button>
        <el-button>取消</el-button>
      </template> -->
    </m-table>
  </div>
</template>

<script lang="ts" setup>
import { TableOptions } from "../../components/table/src/types";
import { ref } from "vue";

interface TableData {
  date: string;
  name: string;
  address: string;
}
let editRowIndex = ref<string>("");
let tableData = ref<TableData[]>([
  {
    date: "2016-05-03",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-02",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-04",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-01",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
]);

// 表格配置
let options: TableOptions[] = [
  {
    label: "日期",
    prop: "date",
    align: "left",
    editable: true,
  },
  {
    label: "名字",
    prop: "name",
    align: "center",
    slot: "name",
  },
  {
    label: "地址",
    prop: "address",
    align: "center",
  },
  {
    label: "操作",
    action: true,
  },
];
/*************************method*******************************/

// 编辑
let edit = (row: any) => {
  editRowIndex.value = "edit";
};
// 取消
let cancel = (row: any) => {
  console.log(row);
};

// 单元格操作
const check = (scope: any) => {};
const close = (scope: any) => {};
</script>
<style lang="scss" scoped></style>
